<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反馈管理 - 加强附魔金苹果模组</title>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="css/admin-style.css" rel="stylesheet">
</head>
<body>
    <div class="admin-layout">
        <!-- 侧边栏 -->
        <nav class="admin-sidebar">
            <div class="sidebar-header">
                <img src="images/logo-small.svg" alt="管理员面板" class="sidebar-logo">
                <h3>管理面板</h3>
            </div>
            
            <ul class="sidebar-menu">
                <li class="menu-item">
                    <a href="admin-dashboard.html">
                        <i class="fas fa-chart-pie"></i>
                        <span>仪表板</span>
                    </a>
                </li>
                <li class="menu-item active">
                    <a href="admin-feedback.html">
                        <i class="fas fa-comments"></i>
                        <span>反馈管理</span>
                        <span class="badge" id="feedbackCount">0</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="admin-settings.html">
                        <i class="fas fa-cog"></i>
                        <span>系统设置</span>
                    </a>
                </li>
                <li class="menu-divider"></li>
                <li class="menu-item">
                    <a href="index.html">
                        <i class="fas fa-external-link-alt"></i>
                        <span>返回网站</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#" onclick="logout()">
                        <i class="fas fa-sign-out-alt"></i>
                        <span>退出登录</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 主内容区域 -->
        <main class="admin-main">
            <!-- 顶部导航 -->
            <header class="admin-header">
                <div class="header-left">
                    <button class="sidebar-toggle" onclick="toggleSidebar()">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h1>反馈管理中心</h1>
                </div>
                <div class="header-right">
                    <div class="header-notification">
                        <i class="fas fa-bell"></i>
                        <span class="notification-badge">3</span>
                    </div>
                    <div class="header-user">
                        <img src="images/admin-avatar.svg" alt="管理员" class="user-avatar">
                        <span>管理员</span>
                    </div>
                </div>
            </header>

            <!-- 反馈管理内容 -->
            <div class="dashboard-content">
                <!-- 统计卡片 -->
                <div class="stats-grid">
                    <div class="stat-card primary">
                        <div class="stat-icon">
                            <i class="fas fa-comments"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="totalFeedbacks">0</h3>
                            <p>总反馈数</p>
                            <span class="stat-change positive">+2%</span>
                        </div>
                    </div>
                    
                    <div class="stat-card warning">
                        <div class="stat-icon">
                            <i class="fas fa-bug"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="bugReports">0</h3>
                            <p>Bug报告</p>
                            <span class="stat-change positive">+1</span>
                        </div>
                    </div>
                    
                    <div class="stat-card success">
                        <div class="stat-icon">
                            <i class="fas fa-lightbulb"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="featureRequests">0</h3>
                            <p>功能建议</p>
                            <span class="stat-change positive">+3</span>
                        </div>
                    </div>
                    
                    <div class="stat-card info">
                        <div class="stat-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="todayFeedbacks">0</h3>
                            <p>今日新增</p>
                            <span class="stat-change positive">+2</span>
                        </div>
                    </div>
                </div>

                <!-- 筛选和操作 -->
                <div class="dashboard-card full-width">
                    <div class="card-header">
                        <h3><i class="fas fa-filter"></i> 筛选和搜索</h3>
                    </div>
                    <div class="card-content">
                        <div class="filters-grid">
                            <div class="filter-group">
                                <label>问题类型</label>
                                <select id="typeFilter">
                                    <option value="all">全部类型</option>
                                    <option value="bug">Bug报告</option>
                                    <option value="feature">功能建议</option>
                                    <option value="compatibility">兼容性问题</option>
                                    <option value="other">其他问题</option>
                                </select>
                            </div>
                            <div class="filter-group">
                                <label>时间范围</label>
                                <select id="dateFilter">
                                    <option value="all">全部时间</option>
                                    <option value="today">今天</option>
                                    <option value="week">本周</option>
                                    <option value="month">本月</option>
                                </select>
                            </div>
                            <div class="filter-group">
                                <label>模组版本</label>
                                <select id="versionFilter">
                                    <option value="all">全部版本</option>
                                    <option value="v1.1.0">v1.1.0</option>
                                    <option value="v1.0.0">v1.0.0</option>
                                </select>
                            </div>
                            <div class="filter-group">
                                <label>搜索关键词</label>
                                <input type="text" id="searchInput" placeholder="搜索标题或内容...">
                            </div>
                        </div>
                        <div class="filter-actions">
                            <button class="action-btn primary" onclick="applyFilters()">
                                <i class="fas fa-search"></i>
                                应用筛选
                            </button>
                            <button class="action-btn success" onclick="clearFilters()">
                                <i class="fas fa-times"></i>
                                清除筛选
                            </button>
                            <button class="action-btn info" onclick="exportFeedbacks()">
                                <i class="fas fa-download"></i>
                                导出数据
                            </button>
                            <button class="action-btn warning" onclick="clearAllFeedbacks()">
                                <i class="fas fa-trash"></i>
                                清空所有
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 反馈列表 -->
                <div class="dashboard-card full-width">
                    <div class="card-header">
                        <h3><i class="fas fa-list"></i> 反馈列表</h3>
                        <div class="card-actions">
                            <button class="btn-small" onclick="refreshFeedbacks()">
                                <i class="fas fa-sync-alt"></i>
                                刷新
                            </button>
                        </div>
                    </div>
                    <div class="card-content">
                        <div id="feedbackList" class="feedback-list">
                            <!-- 反馈项目将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <style>
        /* 反馈管理页面特定样式 */
        .filters-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .filter-group label {
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
        }

        .filter-group select,
        .filter-group input {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 10px 12px;
            color: #fff;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .filter-group select:focus,
        .filter-group input:focus {
            outline: none;
            border-color: #4ade80;
            box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
        }

        .filter-actions {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .feedback-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .feedback-item {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .feedback-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border-color: rgba(74, 222, 128, 0.3);
        }

        .feedback-header {
            padding: 20px 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .feedback-header:hover {
            background: rgba(255, 255, 255, 0.02);
        }

        .feedback-info {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .feedback-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #fff;
            margin: 0;
        }

        .feedback-meta {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            align-items: center;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.85rem;
        }

        .meta-item i {
            color: #4ade80;
        }

        .feedback-type {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .type-bug { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
        .type-feature { background: rgba(34, 197, 94, 0.2); color: #86efac; }
        .type-compatibility { background: rgba(251, 191, 36, 0.2); color: #fde047; }
        .type-other { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }

        .feedback-toggle {
            color: #4ade80;
            font-size: 1.2rem;
            transition: transform 0.3s ease;
        }

        .feedback-item.active .feedback-toggle {
            transform: rotate(180deg);
        }

        .feedback-content {
            display: none;
            padding: 0 25px 25px 25px;
        }

        .feedback-item.active .feedback-content {
            display: block;
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .content-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            margin-bottom: 20px;
        }

        .content-section {
            background: rgba(255, 255, 255, 0.02);
            border-radius: 10px;
            padding: 15px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .section-title {
            font-weight: 600;
            color: #4ade80;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
        }

        .section-content {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.5;
            white-space: pre-wrap;
            font-size: 0.9rem;
        }

        .feedback-actions {
            display: flex;
            gap: 12px;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            flex-wrap: wrap;
        }

        .no-feedback {
            text-align: center;
            padding: 60px 30px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .no-feedback i {
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.3);
            margin-bottom: 15px;
        }

        .no-feedback h3 {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 8px;
        }

        .no-feedback p {
            color: rgba(255, 255, 255, 0.5);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .content-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .filters-grid {
                grid-template-columns: 1fr;
            }

            .feedback-meta {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            .feedback-actions {
                flex-direction: column;
            }

            .filter-actions {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>

    <script src="js/admin-feedback.js"></script>
</body>
</html>